<template>
  <mu-list textline="three-line">
    <template v-for="item in shoppingList">
      <PackageItem
        v-if="item.type === 'package' || item.type === 'individual'"
        :data="item"
        :key="item.label"
      />
      <StaffItem v-if="item.type === 'staff'" :data="item" :key="item.id" />
    </template>
  </mu-list>
</template>

<script>
import { mapState } from "vuex";
import PackageItem from "@/components/ListItem/PackageItem.vue";
import StaffItem from "@/components/ListItem/StaffItem.vue";
export default {
  components: {
    PackageItem,
    StaffItem,
  },
  computed: {
    ...mapState(["amount", "shoppingList"]),
  },
};
</script>

<style></style>
